<template>
	<view class="content">
		<view class="tip">填写身份信息</view>
		<view class="mainbox column">
			<view class="fill">
				<view class="form">
					<uni-forms :modelValue="formData" :label-width="80">
						<uni-forms-item name="name" label="您的姓名:" required>
							<input type="text" class="uniInput" v-model="formData.name" placeholder="请填写姓名" />
						</uni-forms-item>
						<uni-forms-item name="type" label="证件类型:" required>
							<div class="info"  @click="openPopup">
								<input type="text" class="uniInput" v-model="formData.type" placeholder="请选择证件类型" disabled />
								<uni-icons class="icon" type="forward" size="18" color="#6A6A6A"></uni-icons>
							</div>
						</uni-forms-item>
						<uni-forms-item name="card" label="证件号码:" required>
							<input type="text" class="uniInput" v-model="formData.card" placeholder="请填写证件号码" />
						</uni-forms-item>
						<uni-forms-item name="phone" label="手机号码:" required>
							<input type="number" class="uniInput" maxlength="11" v-model="formData.phone" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="attention">*请输入实名制信息，认证成功后可在线签约*</view>
			</view>
		</view>
	</view>
	<view class="content">
		<view class="tip-1">请选择以下任意一项内容认证身份信息</view>
		<view class="auth-item">
			<image :src="$imgUrl + '/personal/auth-id-icon.png'" class="auth-photo" mode=""></image>
			<view class="auth-con">
				<view class="auth-con-1">证件照片</view>
				<view class="auth-con-2">仅用于核实身份</view>
			</view>
			<view class="auth-btn" :class="{'auth-active':flag}" @click="submitForm(1)">去认证</view>
		</view>
		<view class="auth-item">
			<image :src="$imgUrl + '/personal/auth-face-icon.png'" class="auth-photo" mode=""></image>
			<view class="auth-con">
				<view class="auth-con-1">刷脸认证</view>
				<view class="auth-con-2">仅用于核实身份</view>
			</view>
			<view class="auth-btn" :class="{'auth-active':flag}" @click="submitForm(2)">去认证</view>
		</view>
	</view>
	<uni-popup ref="checkpopup" type="bottom" background-color="rgba(0,0,0,0)">
		<view class="check-popup">
			<view class="cancel" @click="cancel">取消</view>
			<view>
				<picker-view indicator-style="50px" :value="value" @change="bindChange" class="picker-view">
				    <picker-view-column>
				        <view class="item" v-for="(item,index) in columns" :key="index">{{item}}</view>
				    </picker-view-column>
				</picker-view>
			</view>
			<view class="btn" @click="confirm">确定</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { reactive,ref,watch } from "vue";
	import { getVerifyUrl } from '@/common/API/checkAuth'
	import { onLoad } from "@dcloudio/uni-app"
	import config from '@/utils/config'
	const formData = reactive({
		id: null,
		name: '',
		card: '',
		phone: null,
		authType: 1,
		type: '',
	})
	const flag = ref(false)
	const value = ref([0])
	const columns = reactive(['身份证', '护照', '港澳居民来往内地通行证','台湾居民来往大陆通行证'])
	const checkpopup = ref(false)
	
	watch(formData,(newValue, oldValue)=> {
		  if(formData.phone.length == 11 && formData.name){
			  //身份证
			  let cardRegexp1 = /^[1-9][0-9]{5}(18|19|20)[0-9]{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)[0-9]{3}([0-9]|(X|x))/
			  //护照
			  let cardRegexp2 = /^[^\s][0-9a-zA-Z]*$/g
			  //港澳居民来往内地通行证
			  let cardRegexp3 = /^[^\s][0-9a-zA-Z]*$/g
			  //台湾居民来往大陆通行证
			  let cardRegexp4 = /^[^\s][0-9a-zA-Z]*$/g

			  if((cardRegexp1.test(formData.card) && formData.type == '身份证') || (cardRegexp2.test(formData.card) && formData.type == '护照') || (cardRegexp3.test(formData.card) && formData.type == '港澳居民来往内地通行证') || (cardRegexp4.test(formData.card) && formData.type == '台湾居民来往大陆通行证')){
				  flag.value = true
			  }else{
				  flag.value = false
			  }
		  }else{
			  flag.value = false
		  }
	  }
	)
	const bindChange = (e) =>{
		value.value = e.detail.value
		// formData.card = null
	}
	const openPopup = (item) => {
		checkpopup.value.open()
	}
	const cancel = () => {
		formData.type = null
		checkpopup.value.close()
	}
	//确认
	const confirm = () => {
		let val = value.value[0]
		switch(val){
			case 0:
				formData.type = '身份证'
				break
			case 1:
				formData.type = '护照'
				break
			case 2:
				formData.type = '港澳居民来往内地通行证'
				break
			case 3:
				formData.type = '台湾居民来往大陆通行证'
				break
		}
		checkpopup.value.close()
	}
	
	const submitForm = async (type:number) => {
		if (!formData.name || !formData.phone) {
			return;
		}
		if(!flag.value){
			return
		}
		let data = {
			"userId": formData.id,
			"name": formData.name,
			"phone": formData.phone,
			"authType": type
		}
		if(formData.type == '身份证'){
			data.card = formData.card
			data.identType = '0'
		}else if(formData.type == '护照'){
			data.passPort = formData.card
			data.identType = '1'
		}else if(formData.type == '港澳居民来往内地通行证'){
			data.hkCard = formData.card
			data.identType = 'B'
		}else if(formData.type == '台湾居民来往大陆通行证'){
			data.twCard = formData.card
			data.identType = 'C'
		}
		try {
			let res = await getVerifyUrl(data)
			if (res) {
				// #ifdef APP-PLUS
				plus.share.getServices(function (res1) {
					var sweixin = null;
					for (var i = 0; i < res1.length; i++) {
						var t = res1[i];
						if (t.id == 'weixin') {
							sweixin = t;
						}
					}
					if (sweixin) {
						backPage()
						let loginInfo = {
							userPhone: uni.getStorageSync('userPhone'),
							accessToken: uni.getStorageSync('accessToken'),
							userId: uni.getStorageSync('userId'),
							tenentId: uni.getStorageSync('tenentId')
						}
						sweixin.launchMiniProgram({
							id: config.wxChatAppId,
							type: config.type,
							path: `/pages/internal/index?loginInfo=${encodeURIComponent(JSON.stringify(loginInfo))}&url=${encodeURIComponent(`/pages/human-face/webview?url=${encodeURIComponent(res)}`)}`
						});
					}
				}, function (e) {
					console.log(e);
				});
				//#endif

				// #ifndef APP-PLUS
					uni.redirectTo({
					  url: '/pages/human-face/webview?url=' + encodeURIComponent(res)
					})
				//#endif
			}
		} catch (err) {
			uni.showModal({
				title: '提示',
				content: err.msg,
				showCancel: false,
				confirmText: '确定'
			});
		}
	}
	//调起app后交互
	const backPage = () => {
		setTimeout(()=>{
			uni.navigateBack({
				delta: 2
			})
		},3000)
	}
	onLoad((options) => {
		let userInfo = uni.getStorageSync('userInfo')
		formData.id = userInfo.id;
		formData.phone = userInfo.mobile;
	})
</script>
<style lang="scss" scoped>
	.content {
		.tip {
			line-height: 88rpx;
			color: rgba(153, 153, 153, 1);
			margin: 0 32rpx;
		}
		.tip-1{
			line-height: 48rpx;
			color: rgba(153, 153, 153, 1);
			margin: 40rpx 32rpx 0 32rpx;
		}
		.mainbox {
			margin: 0 32rpx;
		}
		.fill{
			background: #fff;
			overflow: hidden;
			border-radius: 8rpx;
		}
		.form {
			padding: 0 32rpx;
			::v-deep.uni-forms-item {
				border-bottom: 2rpx solid #f5f5f5;
				margin: 0;
				height: 108rpx;
				display: flex;
				align-items: center;
				.uniInput{
					width: 100%;
				}
				::v-deep.uni-date {
					.icon-calendar {
						display: none;
					}

					.uni-date__x-input {
						padding: 0;
						color: #777;
					}
				}
				// uni-text{
				// 	color: rgba(17, 17, 17, 1);
				// }
				uni-input {
					color: rgba(17, 17, 17, 1);
					font-size: 28rpx;
				}
			}
			// ::v-deep.uni-forms-item__content{
			// 	display: flex;
			// 	align-items: center;
			// }
		}
		.attention {
			padding: 16rpx 32rpx 48rpx 32rpx;
			color: rgba(253, 63, 24, 1);
			font-size: 24rpx;
		}
	}
	::v-deep .content .form .uni-forms-item .is-required{
		color: #dd524d;
	}
	.auth-slider{
		display: flex;
		justify-content: space-between;
		.span-1{
			width: 48rpx;
			height: 48rpx;
			border-radius: 48rpx;
			display: block;
			color: #fff;
			text-align: center;
			line-height: 48rpx;
			background: rgba(216, 216, 216, 1);
			border: 6rpx solid rgba(230, 230, 230, 1);
			box-sizing: content-box;
			font-size: 24rpx;
		}
		.slider-active{
			background: rgba(253, 150, 24, 1);
			border: 6rpx solid rgba(249, 197, 134, 1);
		}
	}
	.auth-item{
		margin: 16rpx 32rpx;
		border-radius: 8rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 34rpx 48rpx;
		.auth-photo{
			width: 52rpx;
			height: 52rpx;
		}
		.auth-btn{
			border-radius: 24rpx;
			background: rgba(242, 242, 242, 1);
			color: rgba(153, 153, 153, 1);
			padding: 2.5rpx 24rpx;
			font-size: 24rpx;
		}
		.auth-active{
			background: rgba(253, 150, 24, 1);
			color: rgba(255, 255, 255, 1);
		}
	}
	.auth-con{
		flex: 1;
		margin-left: 20rpx;
		.auth-con-1{
			color: rgba(17, 17, 17, 1);
			font-size: 28rpx;
		}
		.auth-con-2{
			color: rgba(153, 153, 153, 1);
			font-size: 24rpx;
		}
	}
	.auth-slider-line{
		background: rgba(216, 216, 216, 1);
		height: 4rpx;
		flex: 1;
		margin-top: 24rpx;
	}
	.check-popup{
		height: 530rpx;
		border-radius: 28rpx 28rpx 0 0;
		background: rgba(255, 255, 255, 1);
		text-align: center;
		.picker-view{
			height: 200rpx;
		}
		.cancel{
			color: rgba(153, 153, 153, 1);
			font-size: 26rpx;
			text-align: right;
			padding: 32rpx;
		}
		.btn{
			margin: 94rpx 32rpx 40rpx 32rpx;
			border-radius: 200rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			border-radius: 200rpx;
			height: 84rpx;
			line-height: 84rpx;
			font-size: 32rpx;
		}
	}
	.info{
		display: flex;
		align-content: center;
		width: 100%;
		.address{
			font-size: 28rpx;
			line-height: 44rpx;
			// min-width: 400rpx;
			flex: 1;
			color: rgba(17, 17, 17, 1);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			display: inline-block;
		}
		.icon{
			line-height: 44rpx;
		}
	}
</style>
